// 查看举报事件的详情框
<style scoped>
.reprotImg {
  width: 50px;
  height: 50px;
}
</style>
<template>
  <div>
    <Modal v-model="printModal"
           class="modal-pump"
           width="800"
           title="事件详情">
      <Form :model="formItem"
            :label-width="90">
        <i-col span="12">
          <Form-item label="经办人"
                     prop="confirm_person">
            <Input v-model="confirm_person"
                   readonly
                   :maxlength="12"
                   value="河长办" />
          </Form-item>
          <Form-item label="投诉人"
                     prop="contacts">
            <Input v-model="contacts"
                   readonly
                   :maxlength="5"
                   placeholder="请输入投诉人" />
          </Form-item>
          <Form-item label="联系方式"
                     prop="phone">
            <Input v-model="phone"
                   :maxlength="11"
                   readonly
                   placeholder="请输入联系方式" />
          </Form-item>
          <Form-item label="河湖名称（河段）"
                     prop="river_name">
            <Input v-model="river_name"
                   :maxlength="12"
                   readonly
                   placeholder="请输入河湖名称（河段）" />
          </Form-item>
        </i-col>
        <i-col span="12">
          <Form-item label="登记编号"
                     prop="report_no">
            <Input v-model="report_no"
                   readonly
                   :maxlength="20" />
          </Form-item>
          <Form-item label="投诉时间"
                     prop="report_time">
            <Input v-model="report_time"
                   readonly
                   :maxlength="20"
                   placeholder="请输入投诉时间"></Input>
          </Form-item>
          <Form-item label="身份证"
                     prop="contacts_id">
            <Input v-model="contacts_id"
                   readonly
                   :maxlength="20"
                   placeholder="请输入身份证"></Input>
          </Form-item>
          <Form-item label="地点"
                     prop="address">
            <Input v-model="address"
                   readonly
                   :maxlength="18"
                   placeholder="地址"></Input>
          </Form-item>
        </i-col>
        <i-col span="24">
          <Form-item label="上级督办意见"
                     prop="advice">
            <Input type="textarea"
                   readonly
                   v-model="advice"
                   :autosize="true"
                   :maxlength="500"
                   placeholder="上级督办意见"></Input>
          </Form-item>
          <Form-item label="事件描述"
                     prop="overview">
            <Input type="textarea"
                   v-model="overview"
                   readonly
                   :autosize="true"
                   :maxlength="500"
                   placeholder="事件描述"></Input>
          </Form-item>
          <Form-item label="初步办理意见"
                     prop="complete_opinion">
            <Input type="textarea"
                   v-model="complete_opinion"
                   :autosize="true"
                   readonly
                   :maxlength="500"
                   placeholder="初步办理意见"></Input>
          </Form-item>
          <Form-item label="处理结果"
                     prop="solve_result">
            <Input type="textarea"
                   v-model="solve_result"
                   :autosize="true"
                   readonly
                   :maxlength="500"
                   placeholder="处理结果"></Input>
          </Form-item>
          <Form-item label="处理结果图片"
                     prop="solve_file">
            <div v-for="item in showImgLoad"
                 class="demo-upload-list">
              <img :src="domain2+item"
                   style="width:100%;height:100%;">
            </div>
          </Form-item>
          <Form-item label="回复处理结果"
                     prop="reply_result">
            <Input type="textarea"
                   v-model="reply_result"
                   :autosize="true"
                   :maxlength="800"
                   placeholder="回复处理结果"></Input>
          </Form-item>
        </i-col>
        <i-col span="24">
          <Table ref="table"
                 :data="jinduData"
                 :columns="jinduColumns"
                 stripe></Table>
        </i-col>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { domain, domain2 } from 'global/setting';

export default {
  data() {
    return {
      domain2,
      printModal: false,
      address: '',
      phone: '',
      contacts: '',
      river_name: '',
      report_time: '',
      report_no: '',
      confirm_person: '',
      is_secrecy: '',
      contacts_id: '',
      overview: '',
      complete_opinion: '',
      solve_result: '',
      advice: '',
      reply_result: '',
      formItem: {},
      showImgLoad: [],
      jinduData: [],
      jinduColumns: [
        {
          title: '过程',
          key: 'overview',
        },
        {
          title: '时间',
          key: 'date_time',
        },
      ],
    };
  },
  methods: {
    print(row, type) {
      if (type == '1') {
        this.printshow = true;
      } else {
        this.printshow = false;
      }
      if (type == '4') {
        this.showImgLoad = row.solve_file;
        this.reply_result = row.reply_result;
      } else {
        this.showImgLoad = [];
        this.reply_result = '';
      }
      this.jinduData = row.records;
      this.printModal = true;
      this.address = row.address;
      this.phone = row.phone;
      this.contacts = row.contacts;
      this.river_name = row.river_name;
      this.report_time = row.report_time;
      this.report_no = row.report_no;
      this.confirm_person = '河长办';
      this.is_secrecy = row.is_secrecy;
      this.contacts_id = row.contacts_id;
      this.overview = row.overview;
      this.complete_opinion = row.complete_opinion;
      this.solve_result = row.solve_result;
      this.advice = row.overseer.advice;
    },
  },
  props: {
    row: Array,
    columns: Array,
  },
};
</script>
